<div class="on-top modal-resizable" #layerZIndex>
    <div [className]="isFullPage ? 'detail-container full-page' : 'detail-container'" (mousedown)="onFocus()"
        #containerWindow>
        <mat-toolbar class="title" color="primary" (dblclick)="onFullPage()" [ngStyle]="{'background-color': headerColor}"
            (mousedown)="onStartMove($event)">
            <div> {{ title }} </div>
            <div (mouseover)="_noLayout = true" (mouseout)="_noLayout = false">
                <button mat-icon-button (click)="onFullPage()">
                    <mat-icon *ngIf="!isFullPage">fullscreen</mat-icon>
                    <mat-icon *ngIf="isFullPage">fullscreen_exit</mat-icon>
                </button>
                <button mat-icon-button (click)="newWindow()">
                    <mat-icon>flip_to_front</mat-icon>
                </button>
                <button mat-icon-button (click)="onClose()">
                    <mat-icon>close</mat-icon>
                </button>
            </div>
        </mat-toolbar>
        <div class="inside-content">
            <span #inWindow>
                <ng-content></ng-content>
            </span>
        </div>

        <!-- 
            Resizable conrols 
        -->
        <div class="resize left" (mousedown)="onResize($event, 'left')" (mouseup)="afterResize()"></div>
        <div class="resize right" (mousedown)="onResize($event, 'right')" (mouseup)="afterResize()"></div>
        <div class="resize bottom" (mousedown)="onResize($event, 'bottom')" (mouseup)="afterResize()"></div>
        <div class="resize top" (mousedown)="onResize($event, 'top')" (mouseup)="afterResize()"></div>
        <div class="resize corner tl" (mousedown)="onResize($event, 'tl')" (mouseup)="afterResize()"></div>
        <div class="resize corner tr" (mousedown)="onResize($event, 'tr')" (mouseup)="afterResize()"></div>
        <div class="resize corner bl" (mousedown)="onResize($event, 'bl')" (mouseup)="afterResize()"></div>
        <div class="resize corner br" (mousedown)="onResize($event, 'br')" (mouseup)="afterResize()"></div>
    </div>
</div>

<app-window [isWindow]="__isBrowserWindow" [width]="width" [height]="height" (close)="onWindowClose($event)">
    <div class="out-window" #outWindow></div>
</app-window>